<template>
  <div class="wghfx" :class="{single: !isComponent}">
    <div class="maincp">
      <div class="item" style="height: 420px;width: 240px;">
        <div class="title-head"><img src="/static/imgs/wgh_s/jj1.png" alt="">开票销售占比</div>
        <div id="chart-jjyx-kpxszb" style="height: 375px;width: 240px;"></div>
      </div>
      <div class="item" style="height: 420px;width: 240px;">
        <div class="title-head"><img src="/static/imgs/wgh_s/jj2.png" alt="">入库税金占比</div>
        <div id="chart-jjyx-rksjzb" style="height: 375px;width: 240px;"></div>
      </div>
      <div class="item" style="height: 420px;width: 400px;">
        <div class="title-head"><img src="/static/imgs/wgh_s/jj3.png" alt="">行业前十分类占比</div>
        <div id="chart-jjyx-qshyzb" style="height: 375px;width: 400;"></div>
      </div>
      <div class="item" style="height: 420px;width: 880px;margin-left: 90px;">
        <div class="title-head"><img src="/static/imgs/wgh_s/jj4.png" alt="">主要经济指标</div>
        <div id="chart-jjyx-gckpxsx" style="height: 375px;width: 880px;"></div>
      </div>

      <div class="item" style="height: 420px;width: 880px;">
        <div class="title-head"><img src="/static/imgs/wgh_s/jj7.png" alt="">历年主要经济指标</div>
        <div id="chart-jjyx-qzqnmjqsfx" style="height: 375px;width:880px;"></div>
      </div>
      <div class="item" style="height: 440px;width: 440px;margin: 0 20px 0 90px;overflow:hidden;">
        <div class="title-head"><img src="/static/imgs/wgh_s/jj5.png" alt="">企业销售排行</div>
        <div style="height: 440px;width: 440px;display: flex;overflow:hidden;">
          <div class="qyph-list">
            <div class="header"><div class="t1">排名</div><div class="t2">企业</div></div>
            <div class="boder">
              <div class="len" v-for="(item, index) in jjyxQyxnph.xs" :key="index">
                <div class="t1" :class="'_'+item.order">{{item.order | tenFmt}}</div>
                <el-tooltip class="item" effect="dark" placement="bottom">
                  <div slot="content" style="width: 300px;font-size: 20px;">{{item.name}}</div>
                  <div class="t2">{{item.name}}</div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item" style="height: 440px;width: 440px;overflow:hidden;">
        <div class="title-head"><img src="/static/imgs/wgh_s/jj6.png" alt="">企业税金排行</div>
        <div style="height: 440px;width: 440px;display: flex;overflow:hidden;">
          <div class="qyph-list">
            <div class="header"><div class="t1">排名</div><div class="t2">企业</div></div>
            <div class="boder">
              <div class="len" v-for="(item, index) in jjyxQyxnph.sj" :key="index">
                <div class="t1" :class="'_'+item.order">{{item.order | tenFmt}}</div>
                <el-tooltip class="item" effect="dark" placement="bottom">
                  <div slot="content" style="width: 300px;font-size: 20px;">{{item.name}}</div>
                  <div class="t2">{{item.name}}</div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
  </div>
</template>

<script>
  import G2 from './MyG2';
  import DataSet from '@antv/data-set';
  const APIDATA = window.$APIDATA;
  export default {
    name: 'Jjyxfx',
    data () {
      var path = this.$route.path;
      return {
        isComponent: !path.includes('jjyxfx'),
        jjyxQyxnph: {sj: [], xs: []}
      };
    },
    methods: {
      initJjyxfx: function () {
        var vm = this;
        this.getAndLoad('主要经济指标', 'api/v3/jjyxfx/cTj/getInfoByJj.jsp', this.initJjyxGckpxs);
        this.getAndLoad('入库税金占比', 'api/v3/jjyxfx/zcrksj/getInfoByJj.jsp', this.initJjyxRksjzb);
        this.getAndLoad('企业效能前10排行', 'api/v3/jjyxfx/qysjph/getInfoByJj.jsp', (data) => {
          vm.jjyxQyxnph = data;
        });
        this.getAndLoad('霞客经济效益图', 'api/v3/jjyxfx/hgsjfx/getInfoByJj.jsp', this.initJjyxQzqnmjqsfx);
        this.getAndLoad('网格经济数据', 'api/v3/jjyxfx/qyInfo/getInfoByJj.jsp', (data) => {
          vm.gridJjData = data;
        });
      },
      initJjyxGckpxs: function (sourceData) {
        // document.getElementById('chart-jjyx-gckpxsx-cj').innerHTML = '';
        // var vm = this;
        var fields = Object.keys(sourceData);
        var data = [];
        var length = sourceData[fields[0]].length;
        for (let i = 1; i <= length; i++) {
          let o = { month: i + '月' };
          fields.forEach((f) => {
            o[f] = sourceData[f][i - 1].value;
          });
          data.push(o);
        }
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: fields,
          key: 'type',
          value: 'chanzhi'
        });
        var chart = new G2.Chart({
          container: 'chart-jjyx-gckpxsx',
          width: 880,
          height: 375,
          padding: [60, 30, 70, 90]
        });
        chart.source(dv, {
          month: {
            range: [0, 1]
          }
        });
        chart.axis('month', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('chanzhi', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#59ceec',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        chart.legend('type', {
          position: 'top',
          useHtml: true,
          containerTpl: '<div id="jjxy-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.line().position('month*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).shape('smooth');
        chart.point().position('month*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initJjyxRksjzb: function (data) {
        document.getElementById('chart-jjyx-rksjzb').innerHTML = '';
        document.getElementById('chart-jjyx-kpxszb').innerHTML = '';
        document.getElementById('chart-jjyx-qshyzb').innerHTML = '';
        this.initJjyxRksjzb_1(data.入库税金);
        this.initJjyxRksjzb_2(data.开票销售);
        this.initJjyxRksjzb_3(data.前10行业占比);
      },
      initJjyxRksjzb_1: function (data) {
        this.$FU.calcPercent(data);
        var chart = new G2.Chart({
          container: 'chart-jjyx-rksjzb',
          width: 240,
          height: 375,
          padding: [50, 20, 50, 20]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.6,
          innerRadius: 0
        });
        chart.tooltip(true, {
          showTitle: false
        });
        chart.intervalStack().position('value').color('name', ['#f2637b', '#39a1fd', '#4ecb73']).shape('sliceShape').label('name', {
          textStyle: {
            fill: '#ffffff',
            fontSize: 24
          }
        }).tooltip('name*value*percent', (name, value, percent) => {
          return {
            name: name,
            value: `${value} (${percent})`
          };
        });
        chart.legend(false);
        chart.render();
      },
      initJjyxRksjzb_2: function (data) {
        this.$FU.calcPercent(data);
        var chart = new G2.Chart({
          container: 'chart-jjyx-kpxszb',
          width: 240,
          height: 375,
          padding: [50, 20, 50, 20]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.6,
          innerRadius: 0
        });
        chart.tooltip(true, {showTitle: false});
        chart.intervalStack().position('value').color('name', ['#f2637b', '#39a1fd', '#4ecb73']).shape('sliceShape').label('name', {
          textStyle: {
            fill: '#ffffff',
            fontSize: 20
          }
        }).tooltip('name*value*percent', (name, value, percent) => {
          return {
            name: name,
            value: `${value} (${percent})`
          };
        });
        chart.legend(false);
        chart.render();
      },
      initJjyxRksjzb_3: function (data) {
        var vm = this;
        this.$FU.calcPercent(data);
        var chart = new G2.Chart({
          container: 'chart-jjyx-qshyzb',
          width: 400,
          height: 375,
          padding: [50, 0, 50, -200]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.98
        });
        chart.legend({
          position: 'right',
          useHtml: true,
          containerTpl: '<div id="myright-legend" class="g2-legend fxjjyx"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        // chart.legend(false);
        chart.axis(false);
        chart.tooltip(true, {showTitle: false});
        chart.intervalStack().position('value').color('name', G2.LW_CONSTANCE.COLOR_PIE).shape('flowerShape').style({
          flowerShape: {
            max: vm.$FU._.maxBy(data, 'value').value
          }
        }).tooltip('name*value*percent', (name, value, percent) => {
          return {
            name: name,
            value: `${value} (${percent})`
          };
        });
        chart.render();
      },
      initJjyxQzqnmjqsfx: function (sourceData) {
        var data = sourceData.map((n) => {
          return {
            year: n.year,
            财政收入: n['财政收入(亿元)'],
            地区生产总值: n['地区生产总值(亿元)'],
            开票销售收入: n['开票销售收入(亿元)'],
            工业总产值: n['工业总产值 (万元)'] / 10000,
            '进出口总额(美元)': n['进出口总额(亿美元)']
          };
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: ['财政收入', '地区生产总值', '开票销售收入', '工业总产值', '进出口总额(美元)'],
          key: 'type',
          value: 'chanzhi'
        });
        var chart = new G2.Chart({
          container: 'chart-jjyx-qzqnmjqsfx',
          width: 880,
          height: 375,
          padding: [60, 30, 70, 90]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        // chart.scale('value', { alias: '数值', tickInterval: 40 });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('chanzhi', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#59ceec',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        chart.guide().html({
          top: true,
          offsetX: 50,
          offsetY: -80,
          position: [1, 0],
          html: `<div style="color: white;font-size: 22px;">产值/亿元</div>`,
          zIndex: 0
        });
        chart.legend('type', {
          position: 'top',
          useHtml: true,
          containerTpl: '<div id="jjxy-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.line().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).shape('smooth');
        chart.point().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      getAndLoad: function (chartName, apiUrl, callback, ...params) {
        var vm = this;
        var keys = Object.keys(APIDATA);
        var key = '';
        keys.forEach(k => {
          if (apiUrl.includes(k)) {
            key = k;
          }
        });
        if (APIDATA[key]) {
          callback(APIDATA[key].data, params);
          return;
        }
        vm.$http((process.env.NODE_ENV == "production" ? '/' : '') + apiUrl).then(function (res) {
          if (res.data && res.data.code == 0) {
            callback(res.data.data, params);
          } else {
            vm.$notify.error({ title: '错误', message: `获取数据失败[${chartName}]` });
          }
        }, function () {
          vm.$notify.error({ title: '错误', message: `服务器未成果响应[${chartName}]` });
          vm.activityLoading = false;
        });
      }
    },
    mounted: function () {
      this.initJjyxfx();
    }
  };

</script>

<style lang="scss" scoped>
 .wghfx.single {
  background-size: 100% 100%;
  height: 100%;
  top: 0;
  padding-top: 40px;
  zoom: 0.75;
 }
</style>
